<template>
	<div class="TenantOrder shortorder list4list list4">
		<div class="TenantOrder-title">
			<div class="title-box">
				<span class="short-title " :class="{titleactive: isshortactive}" @click="shortlong($event)">日租</span>
				<span class="long-title" :class="{titleactive: islongactive}" @click="shortlong($event)">长租</span>
			</div>
		</div>
		
		<v-defect v-if="defect" :defectdata="defectdata"></v-defect>
		<div v-if="isshortactive" class="TenantOrder-content short-content">
			<div class="short-item-box">
				<collect-viewt :data="GetBrowsedata" @collectlist="collectlist" ref="GetBrowseshort"></collect-viewt>
			</div>
		</div>

		<div v-if="islongactive" class="TenantOrder-content short-content">
			<div class="short-item-box">
				<collect-viewl :data="GetBrowsedata" @collectlist="collectlist" ref="GetBrowselong"></collect-viewl>
			</div>

		</div>

	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import CollectViewt from "./CollectViewt";
	import CollectViewl from "./CollectViewl";
	import defect from "./defect";
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: "tpbrowse",
		data() {
			return {
				getHiss: JSON.parse(sessionStorage.getItem("userinfo")),
				defect:false,
				defectdata:{
					msg:'暂无浏览记录信息',
					type:"tpbrowse"
				},
				shortorder: true,
				longorder: false,
				isshortactive: true,
				islongactive: false,
				broese: [],
				userId: "",
				token: "",
				page: 1,
				pageSize: '',
				houseType: 2,
				isFirstEnter: false // 是否第一次进入，默认false
			}
		},

		beforeRouteEnter(to, from, next) {
			if(from.name == 'shortDetails' || from.name == 'longDetails') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			if((!this.$route.meta.isBack) || this.isFirstEnter) {
				this.getHiss=JSON.parse(sessionStorage.getItem("userinfo"));
				this.defect=false;
				this.shortorder=true;
				this.longorder=false;
				this.isshortactive=true;
				this.islongactive=false;
				this.broese=[];
				this.userId= "";
				this.token="";
				this.page=1;
				this.pageSize='';
				this.houseType=2;
				this.isFirstEnter=false; // 是否第一次进入，默认false
				if(this.getHiss!= null) {
					this.collectlist(this.page)
				} else {
					this.$router.push({
						path: "/login"
					})
				}
			} 
			// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
			this.$route.meta.isBack = false;
			// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
			this.isFirstEnter = false;

		},
		created() {
			var that = this;
			that.isFirstEnter = true;
		},
		computed: {
			...mapGetters([
				'source',
				'version',
				'GetBrowsedata',
			])
		},
		mounted() {
			if (this.GetBrowsedata.length==0) {
				this.defect=true;
			}
//								that.collectlist(that.page);
		},
		methods: {
			...mapActions({
				getBrowseData: 'getBrowseData',
				getIsCollect: 'getIsCollect'
			}),
			shortlong(event) {
				var that = this;
				if(event.currentTarget.innerText == "日租") {

					that.isshortactive = true;
					that.islongactive = false;
					that.houseType = 2;
					that.broese = [];
					that.collectlist(that.page);
				}
				if(event.currentTarget.innerText == "长租") {
					that.isshortactive = false;
					that.islongactive = true;
					that.houseType = 1;
					that.broese = [];
					that.collectlist(that.page);
				}

			},
			collectlist(page) {
				let that = this;
				var ajaxSign = {
					source: that.source, // string 是 ios
					userId: that.getHiss.id.toString(),
					token: that.getHiss.token, // string 是 85 b318de9caec2cab72adbdc256c3cd5
					houseType: that.houseType.toString(), // string 是 1 长 2
					page: page.toString(), // string 是 1 长 2
					version: that.version
				};
				let ajaxData = api.getAES(ajaxSign);
				console.log(ajaxData)
				//				数据调用
				api.GetBrowse(ajaxData)
					.then(res => {
						console.log(res)
						for(var i = 0; i < res.result.length; i++) {
							res.result[i]['id'] = res.result[i].houseId;
						}
						that.pageSize = res.result.length;
						that.broese = that.broese.concat(res.result)
						that.getBrowseData(that.broese)
						that.getIsCollect(false);
						if(that.houseType == 1) {
							if((that.pageSize % 10) != 0 || that.pageSize == 0) {
								that.$refs.GetBrowselong.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
								return;
							} else {
								that.$refs.GetBrowselong.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
							}
						} else {
							if((that.pageSize % 10) != 0 || that.pageSize == 0) {
								that.$refs.GetBrowseshort.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
								return;
							} else {
								that.$refs.GetBrowseshort.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
							}
						}
					})
			}

		},
		components: {
			CollectViewt,
			CollectViewl,
			'v-defect':defect
		}
	}
</script>

<style scoped>
	.TenantOrder {
		width: 100%;
		color: #282828;
		font-size: .35rem;
	}
	
	.TenantOrder .TenantOrder-title {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #eeecec;
	}
	
	.TenantOrder .title-box {
		width: 100%;
		border: 1px solid #eeecec;
		border-left: none;
		border-right: none;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	
	.TenantOrder .TenantOrder-title span {
		display: block;
		width: 50%;
		text-align: center;
		height: .69rem;
		line-height: .69rem;
		background: #fff;
		padding: 0 .37rem;
		box-sizing: border-box;
	}
	
	.TenantOrder .TenantOrder-title .titleactive {
		color: #fff;
		background: #e25051;
	}
	
	.TenantOrder .TenantOrder-content {
		width: 100%;
	}
	/*日租列表*/
	/*长租导航*/
	
	.TenantOrder .long-navul {
		width: 100%;
		display: flex;
	}
	
	.TenantOrder .long-navitem {
		width: 33.3333%;
		text-align: center;
		line-height: .69rem;
		background: #fff;
	}
	/*房屋列表*/
	
	.TenantOrder .shortorder .yd-list-loading>div {
		display: block !important;
	}
</style>